<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <#include "../common/header.ftl"/>
</head>
<body>

<div class="container " style="margin-top: 20px">
    <#include "../common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3">
            <#assign menu="chart"/>
            <#include "../common/menu.ftl"/>
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">客户报表</h1>
                </div>
            </div>
            <!--高级查询--->
            <form class="form-inline" id="searchForm" action="/chart/list.do" method="post">
                <input type="hidden" name="currentPage" id="currentPage" value="1">
                <div class="form-group">
                    <label>关键字:</label>
                    <input type="text" class="form-control" name="keyword" style="width: 110px;"
                           value="${(qo.keyword)!}" placeholder="请输入销售员">
                </div>
                <div class="form-group">
                    <label>时间:</label>
                    <input type="text" class="form-control" name="beginDate" style="width: 110px;"
                           value="${(qo.beginDate?string("yyyy-MM-dd"))!}" placeholder="请输入开始时间"> ~
                    <input type="text" class="form-control" name="endDate" style="width: 110px;"
                           value="${(qo.endDate?string("yyyy-MM-dd"))!}" placeholder="请输入结束时间">
                </div>
                <div class="form-group">
                    <label>分组类型:</label>
                    <select name="groupType" class="form-control">
                        <option value="e.name">销售员</option>
                        <option value="DATE_FORMAT(c.input_time, '%Y')">年份</option>
                        <option value="DATE_FORMAT(c.input_time, '%Y-%m')">月份</option>
                        <option value="DATE_FORMAT(c.input_time, '%Y-%m-%d')">日期</option>
                    </select>
                </div>
                <script>
                    $("#searchForm select[name='groupType']").val("${qo.groupType}");
                </script>
                <button id="btn_query" class="btn btn-default">
                    <span class="glyphicon glyphicon-search"></span> 查询
                </button>
                <br>
                <a role="button" class="btn btn-success barBtn">
                    <span class="glyphicon glyphicon-film"></span> 柱状图
                </a>
                <a role="button" class="btn btn-success pieBtn">
                    <span class="glyphicon glyphicon-film"></span> 饼状图
                </a>
            </form>

            <table class="table table-striped table-hover" >
                <tr>
                    <th>编号</th>
                    <th>分组类型</th>
                    <th>客户数量</th>
                </tr>
                <#list list as entity>
                    <tr>
                        <td>${entity_index + 1}</td>
                        <td>${entity.groupType}</td>
                        <td>${entity.totalNumber}</td>
                    </tr>
                </#list>
            </table>
        </div>
    </div>
</div>

<#--显示报表的模态框-->
<div class="modal fade" id="chartModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
</div>

<script>
$(function () {
    //给时间选择框绑定点击事件,弹出日历
    $("#searchForm input[name='beginDate']").click(function () {
        WdatePicker({
            readOnly: true, //只读
            maxDate: new Date() //设置最大可选时间
        });
    });
    $("#searchForm input[name='endDate']").click(function () {
        WdatePicker({
            readOnly: true, //只读
            minDate: $("#searchForm input[name='beginDate']").val(), //设置最小可选时间
            maxDate: new Date() //设置最大可选时间
        });
    });

    //柱状图按钮绑定点击事件
    $(".barBtn").click(function () {
        loadChart("/chart/bar.do");
    });

    //柱状图按钮绑定点击事件
    $(".pieBtn").click(function () {
        loadChart("/chart/pie.do");
    });
    
    function loadChart(url) {
        //先清除模态框缓存,再加载远程数据
        $("#chartModal").removeData("bs.modal");
        $("#chartModal").modal({
            remote: url+"?"+$("#searchForm").serialize()
        });
    }
});
</script>
</body>
</html>